<template>
  <div>
      <div class="btn_wrap">
         <el-button type="primary" @click="toInfo()">添加员工</el-button>
         <el-button type="primary" @click="toOpen">excel导入</el-button>
         <el-button type="primary" @click="toExport">excel导出</el-button>
      </div>
      <excelCtrl ref="excelCtrl" ></excelCtrl>
      <div style="margin-left:20px;"> 
        <el-table :data="emplyeeList">
          <el-table-column label="头像">
            <template #default="{row}">
              <div class="avatar_wrap">
                  <img v-if="row.staffPhoto" :src="row.staffPhoto" alt="">
                  <div class="avatar" v-else>黑</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="工号" prop="workNumber"></el-table-column>
           <el-table-column label="聘用形式">
            <template #default="{row}">
              <div>
                  {{row.formOfEmployment==1?'正式':'非正式'}}
              </div>
            </template>
           </el-table-column>
           <el-table-column label="部门" prop="departmentName"></el-table-column>
           <el-table-column label="入职时间" prop="timeOfEntry"></el-table-column>
           <el-table-column label="操作">
              <template #default="{row}">
                <div>
                    <el-link @click="toInfo(row.id)" type="primary">查看</el-link>
                    <el-link type="primary" @click="toOpenRole(row.id)" style="margin:0 10px;">角色</el-link>
                    <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="toDel(row.id)"
                    >
                        <el-link slot="reference" type="primary">删除</el-link>
                    </el-popconfirm>
                </div>
              </template>
           </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination :total="total"  :page-size="pageSize"
          layout="prev,pager,next" background
          :current-page="page"
          @current-change="pageChange"></el-pagination>
        </div>
      </div>
      <!-- 分配角色弹出层 -->
       <el-dialog title="分配角色" width="50%"
       :visible.sync="roleFlag">
          <el-checkbox-group v-model="roleIds">
            <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id" >{{item.name}}</el-checkbox>
          </el-checkbox-group>

          <template #footer>
            <div>
                <el-button type="parimary" @click="toSendRole()">确定</el-button>
                <el-button type="danger" @click="roleFlag=false">取消</el-button>
            </div>
          </template>
      
      </el-dialog>
  </div>
</template>

<script>
import {getPersonApi,toRoleApi,getUserInfo,delUserApi} from '@/api/personnel'
import {getRoles} from '@/api/role'
import * as XLSX from 'xlsx'; //excel导入导出插件
import excelCtrl from './excelCtrl.vue'
export default {
  name: 'EmployeeDepart',
  components:{excelCtrl},
  data() {
    return {
      roleIds:[],//收集选择的角色id
      roleList:[],//角色列表
      currentPersonId:"",//当前分配角色的员工id
      roleFlag:false,
      page:1,
      emplyeeList:[],//员工列表
      total:100,
      pageSize:10,
      queryForm:{ //查询条件
           departmentId:1,//部门id
           keyword:"",  //搜索关键字
           page:1,   //当前页码
           pagesize:10  //当前每页的条数
      }
    };
  },

  created(){
    this.getEmpleeyList()
    this.$bus.$on("senddeaprt",(id)=>{
      // 监听部门id的改变
      this.queryForm.departmentId=id;
      this.getEmpleeyList();
    })
    // 监听查询字段
    this.$bus.$on('sendname',(username)=>{
      this.queryForm.keyword=username;//查询条件
       this.getEmpleeyList();
    })

    this.getRoleList()//获取角色列表
  },

  mounted() {
    
  },

  methods: {
    toExport(){//excel导出功能
      // 使用xlsx 插件  完成导出 需要当前列表数据
      // this.emplyeeList  // 1.将数据转换成excel表格

      // json_to_sheet 将json数据转换成excel表格
      const worksheet = XLSX.utils.json_to_sheet(this.emplyeeList );
      // 创建一个excel表格
        const workbook = XLSX.utils.book_new();
        // 将数据添加到表格
       XLSX.utils.book_append_sheet(workbook, worksheet, '员工导出数据');
       // 将表格保存到本地
       XLSX.writeFile(workbook,'员工导出.xlsx')
       
    },
    toOpen(){ //打开子组件的弹出层
      this.$refs.excelCtrl.perFlag=true;//获取子组件 修改弹出层数据
    },
   async toDel(id){ //删除接口
      let res=await delUserApi(id);
      this.getEmpleeyList()
   },
   async  toOpenRole(id){ //点击角色打开弹出层 
      this.roleFlag=true;
      this.currentPersonId=id;//存储员工id
      let res=await getUserInfo(id) //获取员工的角色列表
      console.log(res,"--------员工角色-------")
      let {roleIds}=res.data;
      this.roleIds=roleIds;
    },
   async  toSendRole(){
    // roleIds checkbox组 自动收集label 多选址
      console.log(this.roleIds,"--------")
      let res=await toRoleApi({
          id:this.currentPersonId,
          roleIds:this.roleIds
      })
      console.log(res,"==----分配角色成功")
      this.roleFlag=false;
   },
   async getRoleList(){ //获取角色列表
      let res=await getRoles()
      console.log(res,"----")
      this.roleList=res.data.rows;
    },
    toInfo(id){ //跳转详情页
         this.$router.push({
            name:"detail",
            query:{
              id:id
            }
          })
    },
      pageChange(val){ //页码改变事件
         this.queryForm.page=val;
         this.getEmpleeyList();
      },
      async getEmpleeyList(){ //获取员工列表
          let res=await getPersonApi(this.queryForm)
          console.log(res,"--------")
          this.emplyeeList=res.data.rows;
          this.total=res.data.total;
       
      }
  },
};
</script>
<style lang="scss">
.el-popconfirm{
  background-color: white;
}
    .btn_wrap{
      display: flex;
      justify-content: flex-end;
      padding-right: 40px;
      box-sizing: border-box;
      margin: 20px 0;
    }
    .page{
      display: flex;
      justify-content: flex-end;
    }
    .avatar_wrap{
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        line-height: 50px;
        text-align: center;
        color: white;
        background: rgb(4,201,190);
      }
    }
</style>